<!DOCTYPE html>
<html lang="zh">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>音乐网站</title>
    <link rel="stylesheet" type="text/css" href="/css/index.css">
    <link rel="stylesheet" type="text/css" href="/css/otherHome.css">
    <link rel="stylesheet" type="text/css" href="/css/css/font-awesome.css">
</head>
<body>
<!-- 标题栏二 -->
<div id="head2">
    <div id="head2-contain">
        <div id="head2-contain-left">音乐共享网站</div>
        <div id="head2-contain-right">
            <i class="fa fa-search"></i>
            <input type="text" id="head2-contain-right-text" placeholder="醉清风">
            <div id="head2-btn">搜索</div>
        </div>
    </div>
</div>
<!-- 导航栏 -->
<div id="guider1">
    <div class="guider2">
        <div class="guide g" id="index" >首页</div>
        <div class="guide g" id="music" >在线音乐</div>
        <div class="guide g" id="singer" >歌手</div>
        <div class="guide g" id="album" >音乐专辑</div>
        <div class="guide" id="index_home" >在线空间</div>
    </div>
</div>
<!-- 中间页面 -->
<div class="Box">
    <!-- 左侧信息 -->
    <div class="BLeft">
        <h5 class="ALTitle" id="CALTitle">
            <i class="fa fa-caret-right tri"></i>
            创建的歌单
            <span>(</span>

            <span>)</span>
        </h5>
        <ul class="AList" id="CAList">
            <li class="album">
                <img src="/img/xianzi.png" alt="">
                <p>我喜欢的音乐</p>
                <p>8首</p>
            </li>
            <li class="album">
                <img src="/img/xianzi.png" alt="">
                <p>我喜欢的音乐</p>
                <p>8首</p>
            </li>
            <li class="album">
                <img src="/img/xianzi.png" alt="">
                <p>我喜欢的音乐</p>
                <p>8首</p>
            </li>
            <li class="album">
                <img src="/img/xianzi.png" alt="">
                <p>我喜欢的音乐</p>
                <p>8首</p>
            </li>
            <li class="album">
                <img src="/img/xianzi.png" alt="">
                <p>我喜欢的音乐</p>
                <p>8首</p>
            </li>
            <li class="album">
                <img src="/img/xianzi.png" alt="">
                <p>我喜欢的音乐</p>
                <p>8首</p>
            </li>
            <li class="album">
                <img src="/img/xianzi.png" alt="">
                <p>我喜欢的音乐</p>
                <p>8首</p>
            </li>
            <li class="album">
                <img src="/img/xianzi.png" alt="">
                <p>我喜欢的音乐</p>
                <p>8首</p>
            </li>
            <li class="album">
                <img src="/img/xianzi.png" alt="">
                <p>我喜欢的音乐</p>
                <p>8首</p>
            </li>
            <li class="album">
                <img src="/img/xianzi.png" alt="">
                <p>我喜欢的音乐</p>
                <p>8首</p>
            </li>
        </ul>

        <h5 class="ALTitle" id="CltALTitle">
            <i class="fa fa-caret-right tri"></i>
            收藏的歌单
            <span>(</span>

            <span>)</span>
        </h5>
        <ul class="AList" id="CltAList">
            <li class="album">
                <img src="/img/xianzi.png" alt="">
                <p>收藏的音乐</p>
                <p>8首</p>
            </li>
        </ul>
    </div>
    <!-- 右侧信息 -->
    <div class="BRight">
        <!-- 歌单信息框 -->
        <div id="listMsg">
            <div id="imgBox">
                <img src="/img/xianzi.png" alt="">
                <span id="mask"></span>
            </div>
            <div class="cnt">
                <div class="itemName">我喜欢的音乐</div>
                <div class="itemMsg">
                    <a href="#"><img src="/img/xianzi.png" alt=""></a>
                    <a href="#"><span>海新枫</span></a>
                    <span>2020-02-02 创建</span>
                </div>
                <div class="btnList">
                    <div class="btn">播放</div>
                    <div class="btn">收藏</div>
                    <div class="btn">分享</div>
                    <div class="btn">下载</div>
                    <div class="btn" id="focusComment">评论</div>
                </div>
            </div>
            <div class="bottomLeftMsg">
                <span>歌曲列表</span>
                <span>3首歌</span>
            </div>
            <div class="bottomRightMsg">
                <span>播放</span>
                <span>3</span>
                <span>次</span>
            </div>
        </div>
        <!-- 歌单歌曲列表 -->
        <div class="musicListBox">
            <div class="musicListBoxTitle">
                <div class="musicListBoxTitleItem" id="item1">歌曲标题</div>
                <div class="musicListBoxTitleItem" id="item2">时长</div>
                <div class="musicListBoxTitleItem" id="item3">歌手</div>
                <div class="musicListBoxTitleItem" id="item4">专辑</div>
            </div>
            <ul class="musicUL">
                <li class="musicList">
                    <span class="c span-num">1</span>
                    <i class="c fa fa-play-circle-o play-icon" style="line-height: 20px;font-size: 22px;"></i>
                    <span class="c spans span-name">蓝莲花</span>
                    <span class="c span-time">04:30</span>
                    <span class="c spans span-singer">许巍</span>
                    <span class="c spans span-album">时光.漫步</span>
                </li>
                <li class="musicList">
                    <span class="c span-num">1</span>
                    <i class="c fa fa-play-circle-o play-icon" style="line-height: 20px;font-size: 22px;"></i>
                    <span class="c spans span-name">蓝莲花</span>
                    <span class="c span-time">04:30</span>
                    <span class="c spans span-singer">许巍</span>
                    <span class="c spans span-album">时光.漫步</span>
                </li>
                <li class="musicList">
                    <span class="c span-num">1</span>
                    <i class="c fa fa-play-circle-o play-icon" style="line-height: 20px;font-size: 22px;"></i>
                    <span class="c spans span-name">蓝莲花</span>
                    <span class="c span-time">04:30</span>
                    <span class="c spans span-singer">许巍</span>
                    <span class="c spans span-album">时光.漫步</span>
                </li>
                <li class="musicList">
                    <span class="c span-num">1</span>
                    <i class="c fa fa-play-circle-o play-icon" style="line-height: 20px;font-size: 22px;"></i>
                    <span class="c spans span-name">蓝莲花</span>
                    <span class="c span-time">04:30</span>
                    <span class="c spans span-singer">许巍</span>
                    <span class="c spans span-album">时光.漫步</span>
                </li>
                <li class="musicList">
                    <span class="c span-num">1</span>
                    <i class="c fa fa-play-circle-o play-icon" style="line-height: 20px;font-size: 22px;"></i>
                    <span class="c spans span-name">蓝莲花</span>
                    <span class="c span-time">04:30</span>
                    <span class="c spans span-singer">许巍</span>
                    <span class="c spans span-album">时光.漫步</span>
                </li>
                <li class="musicList">
                    <span class="c span-num">1</span>
                    <i class="c fa fa-play-circle-o play-icon" style="line-height: 20px;font-size: 22px;"></i>
                    <span class="c spans span-name">蓝莲花</span>
                    <span class="c span-time">04:30</span>
                    <span class="c spans span-singer">许巍</span>
                    <span class="c spans span-album">时光.漫步</span>
                </li>
                <li class="musicList">
                    <span class="c span-num">1</span>
                    <i class="c fa fa-play-circle-o play-icon" style="line-height: 20px;font-size: 22px;"></i>
                    <span class="c spans span-name">蓝莲花</span>
                    <span class="c span-time">04:30</span>
                    <span class="c spans span-singer">许巍</span>
                    <span class="c spans span-album">时光.漫步</span>
                </li>
                <li class="musicList">
                    <span class="c span-num">1</span>
                    <i class="c fa fa-play-circle-o play-icon" style="line-height: 20px;font-size: 22px;"></i>
                    <span class="c spans span-name">蓝莲花</span>
                    <span class="c span-time">04:30</span>
                    <span class="c spans span-singer">许巍</span>
                    <span class="c spans span-album">时光.漫步</span>
                </li>
            </ul>
        </div>
        <!-- 评论 -->
        <div id="commentBox">
            <div id="myCommentBox">
                <div id="title">评论<span>共<span class="commentNum">123</span>条评论</span></div>
                <textarea id="myCommentText"></textarea>
                <img src="/img/xianzi.png" id="myCommentCover">
                <span id="commentLength">0/100</span>
                <div id="commentBtn">评论</div>
            </div>
            <div class="commentTitle">热门评论</div>
            <div id="hotCommentList" class="commentList">

                <div class="commentItem" >
                    <div class="itemLeft">
                        <img src="/img/xianzi.png" alt="">
                    </div>
                    <div class="itemRight">
                        <div class="itemRightTop">
                            <div class="commentText">
                                <a href="#">sasa:</a>
                                阿斯蒂芬卡拉和；爱丽丝打开噶多连杆后欸给了傻瓜阿里斯顿好噶；
                                阿斯兰的好i俄国沙花都开了阿喀琉斯大奶俄国八十数量可观吧阿瑟
                                部分埃勒克哦i阿婆厚爱问题去哦欸图 好人韩国
                                阿斯蒂芬卡拉和；爱丽丝打开噶多连杆后欸给了傻瓜阿里斯顿好噶；
                                阿斯兰的好i俄国沙花都开了阿喀琉斯大奶俄国八十数量可观吧阿瑟
                                部分埃勒克哦i阿婆厚爱问题去哦欸图 好人韩国
                                阿斯蒂芬卡拉和；爱丽丝打开噶多连杆后欸给了傻瓜阿里斯顿好噶；
                                阿斯兰的好i俄国沙花都开了阿喀琉斯大奶俄国八十数量可观吧阿瑟
                                部分埃勒克哦i阿婆厚爱问题去哦欸图 好人韩国
                                阿斯蒂芬卡拉和；爱丽丝打开噶多连杆后欸给了傻瓜阿里斯顿好噶；
                                阿斯兰的好i俄国沙花都开了阿喀琉斯大奶俄国八十数量可观吧阿瑟
                                部分埃勒克哦i阿婆厚爱问题去哦欸图 好人韩国
                                阿斯蒂芬卡拉和；爱丽丝打开噶多连杆后欸给了傻瓜阿里斯顿好噶；
                                阿斯兰的好i俄国沙花都开了阿喀琉斯大奶俄国八十数量可观吧阿瑟
                                部分埃勒克哦i阿婆厚爱问题去哦欸图 好人韩国'. b v414
                            </div>
                        </div>
                        <div class="itemRightBottom">
                            <span class="commentTime">2020-02-10</span>
                            <div class="commentGrate">
                                <div class="grate" >点赞</div>
                                <span >10赞</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="commentItem" >
                    <div class="itemLeft">
                        <img src="/img/xianzi.png" alt="">
                    </div>
                    <div class="itemRight">
                        <div class="itemRightTop">
                            <div class="commentText">
                                <a href="#">sasa:</a>
                                阿斯蒂芬卡拉和；爱丽丝打开噶多连杆后欸给了傻瓜阿里斯顿好噶；
                                阿斯兰的好i俄国沙花都开了阿喀琉斯大奶俄国八十数量可观吧阿瑟
                                部分埃勒克哦i阿婆厚爱问题去哦欸图 好人韩国
                            </div>
                        </div>
                        <div class="itemRightBottom">
                            <span class="commentTime">2020-02-10</span>
                            <div class="commentGrate">
                                <div class="grate" >点赞</div>
                                <span >10赞</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="commentItem" >
                    <div class="itemLeft">
                        <img src="/img/xianzi.png" alt="">
                    </div>
                    <div class="itemRight">
                        <div class="itemRightTop">
                            <div class="commentText">
                                <a href="#">sasa:</a>
                                阿斯蒂芬卡拉和；爱丽丝打开噶多连杆后欸给了傻瓜阿里斯顿好噶；
                                阿斯兰的好i俄国沙花都开了阿喀琉斯大奶俄国八十数量可观吧阿瑟
                                部分埃勒克哦i阿婆厚爱问题去哦欸图 好人韩国
                            </div>
                        </div>
                        <div class="itemRightBottom">
                            <span class="commentTime">2020-02-10</span>
                            <div class="commentGrate">
                                <div class="grate" >点赞</div>
                                <span >10赞</span>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="commentTitle">最新评论</div>
            <div id="newCommentList" class="commentList">
            </div>
        </div>
    </div>
</div>
</body>
<script src="/js/jquery-3.4.1.js"></script>
<script src="/js/index2.js"></script>
<script src="/js/index_home.js"></script>
</html>